import React,{useState} from 'react';
import {View, Text,TextInput,StyleSheet} from 'react-native';
import Touchable from "../../components/Touchable";
import {windowWidth,windowHeight,getWidth,getHeight} from "../../utils";
import Toast from 'react-native-root-toast';
import {connect, ConnectedProps} from 'react-redux';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {RootState} from "@/models/index";
interface IFormData {
  user_id:string;
  newPassword:any;
  oldPassword:any;
}
const mapStateToProps = ({users, loading}: RootState) => {
  return {
    // 在触发getUserInfo方法时加上加载效果
    loading: loading.effects['users/modifyPassword'],
  };
};
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState{
  navigation: {goBack: any, navigate:any};
  route: any;
}
const ModifyPassWord = (props:IProps) => {
  const {route,dispatch,navigation} = props;
  const [formData,setFormData] = useState<IFormData>({
    user_id:route.params.user_id,
    newPassword:null,
    oldPassword:null
  });
  const onChangeText = (text: string, name: string) => {
    console.log('name1111111111111', name, 'text111111111111111111', text);
    let obj = {[name]: text};
    let newFormData = Object.assign(formData, obj);
    console.log("newFormData",newFormData);
    setFormData(newFormData);
  };
  const handleModifyPassword = () => {
    console.log("点击了修改密码");
    console.log("route.params.user_id",route.params.user_id);
    console.log("route.params.password",route.params.password);
    if(!formData.oldPassword) {
      Toast.show('请输入原密码', {
        position: Toast.positions.CENTER,
        duration: Toast.durations.LONG,
        shadow: true,
        animation: true,
      });
      return;
    }
    if(!formData.newPassword){
      Toast.show('请输入新密码', {
        position: Toast.positions.CENTER,
        duration: Toast.durations.LONG,
        shadow: true,
        animation: true,
      });
      return;
    }
    if(route.params.password){
      if(formData.oldPassword !== route.params.password) {
       Toast.show('原密码不正确，请重新输入', {
        position: Toast.positions.CENTER,
        duration: Toast.durations.LONG,
        shadow: true,
        animation: true,
      });
      return;
    }
  }
  console.log("formData",formData)
    // 否则，携带数据请求后端接口修改密码
    dispatch({
      type: 'users/modifyPassword',
      payload: {
        formData: formData,
        callback: () => {      
          Toast.show('修改密码成功', {
            position: Toast.positions.CENTER,
            duration: Toast.durations.LONG,
            shadow: true,
            animation: true,
          });
          // 请求修改密码成功之后跳转到登陆页面强制重新登录
          // 清空token和保存的用户信息
          AsyncStorage.setItem('token', "");
          AsyncStorage.setItem('currentUserInfo', "");
          navigation.navigate("Login");
        },
      },
    })
    
  }
  return (
    <View style={styles.modifyPassword}>
       <View style={styles.mainBox}>
        <Text style={styles.title}>用户名：{route.params.username}</Text>
        <TextInput placeholder='请输入原密码' secureTextEntry={true} style={[styles.inputBox, styles.inputBoxTop]}
         onChangeText={text => onChangeText(text,"oldPassword")}></TextInput>
        <TextInput placeholder='请输入新密码' secureTextEntry={true} style={styles.inputBox}
         onChangeText={text => onChangeText(text,"newPassword")}></TextInput>
        <Touchable onPress={handleModifyPassword}><Text style={styles.loginBtn}>修改密码</Text></Touchable>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  modifyPassword:{
    padding: 10,
    backgroundColor: '#fff',
    width: windowWidth,
    height: windowHeight,
  },
  mainBox: {
    marginTop:70,
    display:"flex",
    alignItems:"center",
    
  },
  bigTitle: {
    fontSize:70,
    fontWeight:"700",
    color:"#A75E5E",
  },
  title: {
    fontSize:16,
    fontWeight:"700",
    fontFamily:"Edwardian Script ITC",
    color:"#A75E5E",
  },
  image: {
    width:200,
    height:130,
    resizeMode: 'stretch',
    marginBottom:10,
  },
  image1: {
    width:150,
    height:16,
    resizeMode: 'stretch',
  },
  image2:{
    width:240,
    height:18,
    resizeMode: 'stretch',
  },
  inputBox: {
    width:getWidth(80),
    height:40,
    borderBottomColor:"#A75E5E",
    borderBottomWidth:1,
  },
  inputBoxTop: {
    marginTop:20
  },
  loginBtn:{
    width:getWidth(50),
    height:35,
    color:"#fff",
    textAlign:"center",
    backgroundColor:"#A75E5E",
    marginVertical:35,
    borderRadius:35,
    lineHeight:35
  },
})
export default connector(ModifyPassWord);
